<template>
  <div class="hot">
    <!-- 轮播图广告 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="http://127.0.0.1:3000/images/banner1.jpg" alt width="100%" />
        </div>
        <div class="swiper-slide">
          <img src="http://127.0.0.1:3000/images/banner2.jpg" alt width="100%" />
        </div>
        <div class="swiper-slide">
          <img src="http://127.0.0.1:3000/images/banner3.jpg" alt width="100%" />
        </div>
        <div class="swiper-slide">
          <img src="http://127.0.0.1:3000/images/banner4.jpg" alt width="100%" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 中间菜单 -->
    <hotNav></hotNav>
    <!-- 广告位 -->
    <div class="hot-ad">
      <img src="../images/hot-ad.jpg" alt width="100%" />
    </div>
    <hotList />
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import hotNav from "../children/hotNav";
import hotList from "../children/hotShopList";
import axios from "axios";
export default {
  data() {
    return {
      banner: []
    };
  },
  components: {
    hotNav,
    hotList
  },
  created() {
    this.getBanner();
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      // 如果需要分页器
      autoplay: true,
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },
  methods: {
    async getBanner() {
      await axios
        .get("http://127.0.0.1:3000/api/casual")
        .then(res => {
          console.log(res);
          this.banner=res.data.message
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
.hot {
  width: 100%;
}
.hot-ad {
  margin: 8px 0;
  background-color: #fff;
  padding: 5px;
}
</style>